import React from 'react'
import { LoginApi } from '../../api/user'
import {
  Form,
  Input,
  Button,

} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Login() {
  const nav = useNavigate()

  //  登录
  const onFinish = async (value) => {
    const { data: res } = await LoginApi(value)
    localStorage.setItem('token', res.token)
    console.log(res.token)
    localStorage.setItem('avatar', res.avatar)
    localStorage.setItem('id', res.id)
    nav('/')
  }

  return (
    <div>

      {/* form表单 */}
      <Form
        onFinish={onFinish}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >

        <Form.Item

          name='username'
          label='账号'
          rules={[{ required: true, message: '账号不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入账号' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' },
          { pattern: /^\w{6,12}$/, message: '密码格式不正确' }
          ]}
        >
          <Input onChange={console.log} placeholder='请输入密码' />
        </Form.Item>

      </Form>
    </div>
  )
}

export default Login